<template>
	<view >
				<!-- 全部订单区域 -->
			    <view slot="content0" class="tab_text commodity">
					<!-- 商品详情加图片区域 -->
					<view class="commodity_content">
						<view  class="commodity_text">
							<!-- 图片区域 -->
							<view class="commodity_img">
								<!-- 商品图片区域 -->
								<image :src="imgUrl+messageString[2]" mode="" @error="messageString[2]='assets/zanwu.png'"></image>
							</view>
							<!-- 商品大小型号区域 -->
							<view class="commodity_color">
								<!-- 商品名称区域 -->
								<view><text>{{messageString[4]}}</text></view>																							<view class="commodity_color1">
									<!-- 商品颜色区域 -->
									<text>{{messageString[5]}}</text>
									<!-- 商品型号区域 -->
									<text>{{messageString[1]}}</text>
								</view>			
							</view>
						</view>
						<!-- 商品价格和数量区域 -->
						<view>
							<view class="commodity">
								<!-- 商品价格区域 -->
								<text>￥{{messageString[3]}}</text>
							</view>
							<!-- 商品数量区域 -->
							<text>X 1</text>
						</view>
					</view>
					<!-- 商品数量与价格区域 -->
					<view class="price">
						
					</view>
					<!-- 按钮区域 -->
					<!-- 售后类型选择 -->
					<view class="shlx">
					<view><text>售后类型</text></view>
							<view>
								<uni-data-checkbox v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
							</view>
					</view>
					<!-- 申请理由 -->
					<view class="shlx">
						<view>申请理由</view>
						<uni-data-picker v-slot:default="{data, error, options}" popup-title="申请理由">
						  <view v-if="error" class="error">
						    <text>{{error}}</text>
						  </view>
						  <view v-else-if="data.length" class="selected">
						    <view v-for="(item,index) in data" :key="index" class="selected-item">
						      <text>{{item.text}}</text>
						    </view>
						  </view>
						  <view v-else>
						    <text>选择申请理由(必选)</text>
						  </view>
						</uni-data-picker>
					</view>
					<veiw><uni-easyinput type="textarea" v-model="value" placeholder="请输入内容"></uni-easyinput></veiw>
					<!-- 上传凭证 -->
					<view class="scpz1">上传凭证</view>
					<view class="scpz">
						<view>
							<uni-file-picker limit="1" fileMediatype="image" :image-styles="imageStyles"/>
							<view>商品全图</view>
						</view>
						<view >
							<uni-file-picker limit="1" fileMediatype="image" :image-styles="imageStyles"/>
							<view>防伪码</view>
						</view>
						<view >
							<uni-file-picker limit="1" fileMediatype="image" :image-styles="imageStyles"/>
							<view>商品照片</view>
						</view>
						<view >
							<uni-file-picker  limit="1" fileMediatype="image" :image-styles="imageStyles"/>
							<view>问题特写</view>
						</view>
					</view>
				</view>
				
				
	</view>
	
</template>

<script>
	import aloysTab from "@/components/aloys-tab/aloys-tab.vue"
	import store from '@/store/index.js'
	import { mapState, mapActions } from "vuex"
	import http from '../../until/http.js'
	
	export default {
	  components: { aloysTab },
	  data() {
	    return {
			// 获取图片的路径
			imgUrl:'http://localhost:8888/getImg?sort=',
			imageStyles:{
							width:80,
							height:80,
							border:{
								color:"",
								width:2,
								style:'dashed',
								radius:'2px'
							}
						},
						listStyles:{
							// 是否显示边框
							border: true,
							// 是否显示分隔线
							dividline: true,
							// 线条样式
							borderStyle: {
								width:1,
								color:'blue',
								radius:2
							}
						},
			dataTree: [{
								text: "一年级",
								value: "1-0"
							},
							{
								text: "二年级",
								value: "2-0"
							}],
			value: 0,
			range: [{"value": 0,"text": "仅退款"	},{"value": 1,"text": "退货退款"}],
	      tabs: [{
	        title: '全部'
	      },{
	        title: '待付款'
	      },{
	        title: '待收货'
	      },
		  {
		    title: '待评价'
		  },
		  {
		    title: '已完成'
		  }
		  ,{
		    title: '售后'
		  }],
		  // 存放全部订单数据
		  all_orders:{},
	    }
	  },
	  computed:{
	  	// 从vuex中拿取数据
	  	...mapState(['messageString']),
	  	messageString() {
	  		return this.$store.state.messageString 
	  	}
	  },
	  onLoad() {
		   this.getall_orders()
	  },
	  methods: {
		  onnodeclick(e) {
		  			console.log(e);
		  			},
		  			onpopupopened(e) {
		  				console.log('popupopened');
		  			},
		  			onpopupclosed(e) {
		  				console.log('popupclosed');
		  			},
		  			onchange(e) {
		  				console.log('onchange:', e);
		  			},
		  getall_orders(){
			  uni.request({
			  	url: '/goods/getallspfl',
			  	method: 'GET',
			  	success: (res) => {
			  		 
					 console.log(res)
			  	}
			  })
		  }
	   
	  }
	}
</script>

<style lang="less" scoped>
.tab_text{
  // font-size: 42rpx;
  // font-weight: bold;
  padding: 100rpx 0;
}
.commodity{
	padding: 10px 20px;
	display: flex;
	flex-direction:column;
	.anniu4{
		display: flex;
		justify-content: flex-end;

		.anniu_cancl4{
			margin-right: 5px;
		}
	}
	.anniu3{
		display: flex;
		justify-content: flex-end;
	
		.anniu_cancl3{
			margin-right: 5px;
		}
	}
	.anniu2{
		display: flex;
		justify-content: flex-end;
	
		.anniu_cancl2{
			margin-right: 5px;
		}
	}
	.anniu{
		display: flex;
		justify-content: space-between;
		margin-top: 3px;
		.state{
			display: flex;
			 align-items:center;
			 color: red;
		}
		.anniu1{
			display: flex;
			.anniu_cancl{
				margin-right: 5px;
			}
		}
		
	}
	.price{
		display: flex;
		justify-content: flex-end;
		margin-right: 10px;
		margin: 3px 0;
		.price_quantity{
			margin-right: 10px;
		}
	}
	.commodity_text{
		display: flex;
		flex-direction:row;
		.commodity_img{
			width: 80px;
			height: 80px;
			padding-top: 10px;
			image{
				width: 100%;
				height: 100%;
				width: 80px;
				height: 80px;
				
			}
		}
		.commodity_color{
			padding: 5px 40px 5px 25px;
			display: flex;
			flex-direction:column;
			
			.commodity_color1{
				margin-top: 10px;
				color: #999999;
				display: flex;
				justify-content: flex-start;
			}
			
		}
	}
	.commodity_content{
		display: flex;
		flex-direction:row;
	}
	
}
.shlx{
	display: flex;
	align-items: center;
	justify-content:space-between;
	margin-top: 20px;
}
.scpz{
	width: 100%;
	height: 200rpx;
	display: flex;
	  justify-content:space-around;
	  margin-top: 20px;
}
.scpz1{
	margin-top: 20px;
}
</style>
